<template>
    <div>
        <mt-header fixed class="m_mint_header" title="产品详情">
            <router-link to="/m/home" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="h50"></div>
        <div class="buy_manage_detail">
            <el-card :body-style="{ padding: '0px' }" shadow="never">
                <div class="card_title">
                    <span>{{this.$route.query.name}}</span>
                </div>
                <div class="card_body">
                    <el-button disabled type="text">利率</el-button>
                    <el-button disabled type="text">产品期限</el-button>
                </div>
                <div class="card_footer">
                    <el-button disabled type="text">{{this.$route.query.moneyRate}}%</el-button>
                    <el-button disabled type="text">{{this.$route.query.period}}天</el-button>
                </div>
            </el-card>

        </div>
        <div class="buy_manage">
            <p class="buy_manage_top">购买金额</p>
            <mt-field label="WT" :placeholder="$route.query.startAmount+'起投'" type="number"
                      v-model="formManage.amount"></mt-field>
            <p class="buy_manage_warning">现在购买，预计明日成交，成交后不可撤销，若在理财到期前提出，将扣除购买额度10%的违约金且无法获得收益。</p>
            <mt-button size="large" type="primary" @click.native="clickBuy">确认购买</mt-button>
        </div>

    </div>
</template>

<script>

    import {MessageBox} from 'mint-ui';

    export default {
        name: "ManageBuy",
        data() {
            return {
                formManage: {
                    amount: ''
                }
            }
        },
        methods: {
            clickBuy() {
                if (this.formManage.amount == "" || this.formManage.amount < this.$route.query.startAmount) {
                    this.$toast({message: "请输入正确的起投资金"});
                    return false;
                }
                MessageBox.confirm(
                    "本产品成交后不可撤销，到期前取出将扣除购买额度10%的违约金且无法获得收益",
                    '温馨提示',
                )
                    .then(() => {
                        this.requestAxios.requestWeb('post', webUserBalanceApi + '/buy.do', {
                            productId: this.$route.query.id,
                            amount: this.formManage.amount,
                        }, (response) => {
                            this.$toast({message: response.message, duration: 1000});
                        })
                    }).catch(() => {
                        this.$toast({message: '操作取消', duration: 1000});
                    }
                );
            }
        }
    }
</script>

<style>

    .buy_manage_detail{
        padding:.3rem;
    }

    .buy_manage_detail .el-card {
        padding: .3rem;
        border: none!important;
        background: transparent;
    }

    .buy_manage_detail .card_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        margin-bottom: .2rem;
        font-size: .32rem;
    }

    .buy_manage_detail .card_title .el-button {
        padding: .03rem .2rem;
        border-radius: .3rem;
        border: 1px solid #ebad7a;
        color: #ebad7a;
        margin-bottom: .1rem;
    }

    .buy_manage_detail .card_body, .buy_manage_detail .card_footer {
        display: flex;
        justify-content: space-around;
    }

    .buy_manage_detail .card_body .el-button, .buy_manage_detail .card_footer .el-button {
        padding: .1rem 0;
    }

    .buy_manage_detail .card_body .el-button:first-child,.buy_manage_detail .card_footer .el-button:first-child {
        min-width: 30%;
        text-align: left;
        margin-right: .3rem;
    }

    .buy_manage_detail .card_footer .el-button:first-child {
        color: #ed8207;
        font-weight: bold;
        font-size: .32rem;
    }

    .buy_manage_detail .card_footer .el-button:last-child {
        color: #333;
        font-weight: bold;
        font-size: .32rem;
    }

    .buy_manage_detail .el-button.is-disabled{
        color:#999;
    }


    .buy_manage {
        padding: .3rem .6rem;
    }



    .buy_manage_top {
        font-weight: bold;
        margin-bottom: .3rem;
    }


    .buy_manage .mint-cell{
        background: transparent;
    }

    .buy_manage .mint-field-core{
        background: transparent;
    }

    .buy_manage .mint-cell-title {
        width: .5rem !important;
        background: #fba704;
        padding: .1rem .05rem;
        border-radius: .1rem;
        color: #fff;
        margin-right: .3rem;
        font-size: .2rem;
        text-align: center;
    }

    .buy_manage .mint-field-core {
        border-bottom: 2px solid #cbcfda;
        padding: .05rem 0;
    }

    .buy_manage_warning{
        padding-left: 1rem;
        font-size: .25rem;
        color: #999;
    }


    .buy_manage .mint-button{
        margin-top: .6rem;
        background: linear-gradient(#fe9f3d, #ce5900);
        height: .65rem;
        font-size: .28rem;
        box-shadow: 5px 5px 10px #dfe4e6;
    }



</style>

